<template>
  <div class="container">
    <u-navbar
      class="custom-navbar"
      :title="pageTitle"
      :title-bold="false"
    ></u-navbar>
    <div class="content">
      <scroll-view style="height: 100%" scroll-y>
        <div class="content-card">
          <cell-form label="城市" labelWidth="140" required>
            <pickerTrigger :value="form.cityName" @onClick="onCityClick" />
          </cell-form>
          <cell-form label="车型" labelWidth="140" required>
            <pickerTrigger
              :value="form.modelGroupName"
              @onClick="onModelClick"
            />
          </cell-form>
          <cell-form label="产品" labelWidth="140" required>
            <div class="disabled">{{ form.productTypeName }}</div>
          </cell-form>
          <cell-form
            label="司机姓名"
            labelWidth="140"
            :disabled="isOnlineProvider"
          >
            <u-input
              :height="44"
              :disabled="isOnlineProvider"
              maxlength="20"
              placeholder="请输入"
              v-model="form.driverName"
            />
          </cell-form>
          <cell-form
            label="司机手机号"
            labelWidth="140"
            :disabled="isOnlineProvider"
          >
            <u-input
              :height="44"
              :disabled="isOnlineProvider"
              maxlength="20"
              placeholder="请输入"
              type="number"
              v-model="form.driverPhone"
            />
          </cell-form>
          <cell-form
            label="车牌号"
            labelWidth="140"
            :disabled="isOnlineProvider"
          >
            <u-input
              :height="44"
              :disabled="isOnlineProvider"
              maxlength="20"
              placeholder="请输入"
              v-model="form.licenseNo"
            />
          </cell-form>
          <cell-form label="车系" labelWidth="140" :disabled="isOnlineProvider">
            <pickerTrigger :value="form.seriesName" @onClick="onSeriesClick" />
          </cell-form>
          <!-- 加品牌显示 -->
          <div class="brand-wrapper">
            <div class="brand-trigger" v-if="isOnlineProvider">
              <image
                mode="aspectFit"
                src="../static/images_qccx/choice_disabled.png"
              />
              加品牌显示
            </div>
            <div class="brand-trigger" @click="onBrandClick" v-else>
              <image
                v-if="form.brandShow"
                mode="aspectFit"
                src="../static/images_qccx/choice_active.png"
              />
              <image
                v-else
                mode="aspectFit"
                src="../static/images_qccx/choice.png"
              />
              加品牌显示
            </div>
            <!-- 存在已选车系时，点击 加品牌显示才会显示品牌-->
            <div class="brand-result" v-if="form.brandSeries && form.brandShow">
              {{ form.brandSeries }}
            </div>
          </div>
        </div>
        <div class="content-card content-fee">
          <cell-form label="基础费用" :borderBottom="false">
            <input-number
              placeholder="请输入"
              v-model="form.baseAmount"
              unit="元"
            />
          </cell-form>
        </div>
      </scroll-view>
    </div>
    <div class="bottom-box">
      <u-button
        type="primary"
        :customStyle="{
          background: '#FF874FFF',
          width: '100%',
        }"
        :loading="okLoading"
        @click="onSubmitClick"
        >确认分发</u-button
      >
    </div>
    <!-- toast -->
    <u-toast ref="uToast" />
  </div>
</template>
<script>
import cellForm from "./components/cell-form.vue";
import pickerTrigger from "./components/picker-trigger.vue";
import inputNumber from "./components/input-number.vue";
import {
  getOrderDetail,
  getProviderPrice,
  orderGive,
  orderReGive,
} from "@/api/qccx";
export default {
  data() {
    return {
      orderInfo: {},
      form: {},
      okLoading: false,
      isRegive: false,
      pageTitle: "订单分发",
      isOnlineProvider: false, // 是否是线上服务商
    };
  },
  components: {
    cellForm,
    inputNumber,
    pickerTrigger,
  },
  methods: {
    onCityClick() {
      uni.navigateTo({
        url: "/pages_qccx/other-page/choose-city",
      });
    },
    onModelClick() {
      uni.navigateTo({
        url: "/pages_qccx/other-page/choose-model",
      });
    },
    onSeriesClick() {
      if (!this.isOnlineProvider) {
        uni.navigateTo({
          url: "/pages_qccx/other-page/choose-series",
        });
      }
    },
    handleCityChoose(cityItem) {
      const { name, code } = cityItem;
      this.form.cityName = name;
      this.form.cityCode = code;

      this.getProviderFee();
    },
    handleModelChoose(modelItem) {
      const { groupName, id } = modelItem;
      this.form.modelGroupName = groupName;
      this.form.modelGroupId = id;

      this.getProviderFee();
    },
    handleSeriesChoose(seriesItem) {
      const { seriesName, id, brandId, brandName } = seriesItem;
      this.form.seriesId = id;
      this.form.seriesName = seriesName;
      this.form.brandSeries = brandName + seriesName;
    },
    onBrandClick() {
      this.form.brandShow = this.form.brandShow == 1 ? 0 : 1;
    },
    getProviderFee() {
      const formVal = this.form;
      const param = {
        orderId: formVal.id,
        cityCode: formVal.cityCode,
        productType: formVal.productType,
        modelGroupId: formVal.modelGroupId,
        providerId: formVal.providerId,
        startAddressName: this.orderInfo.startAddressName,
        endAddressName: this.orderInfo.endAddressName,
        useDay: this.orderInfo.useDay,
      };
      getProviderPrice(param).then((res) => {
        const result = res.result;
        this.form.baseAmount = result.baseAmount;
      });
    },
    /**
     * 确认分发
     */
    onSubmitClick() {
      this.okLoading = true;
      const api = this.isRegive ? orderReGive : orderGive;
      api(this.form)
        .then((res) => {
          if (res.code == 200) {
            this.$refs.uToast.show({
              title: "操作成功",
              callback: () => {
                uni.$emit("success");
                uni.navigateBack({
                  delta: 2,
                });
              },
            });
          }
        })
        .catch(() => {
          this.okLoading = false;
        });
    },
  },
  onLoad(options) {
    const id = options.id;
    const providerId = options.providerId;
    const isOnlineProvider = options.isOnlineProvider;
    this.isOnlineProvider = !!isOnlineProvider;
    const isRegive = options.isRegive;
    this.isRegive = isRegive;
    if (isRegive) {
      this.pageTitle = "订单重新分发";
    } else {
      this.pageTitle = "订单分发";
    }
    getOrderDetail({ id: id }).then((res) => {
      const result = res.result;
      this.orderInfo = result;
      this.form = {
        id: id,
        providerId: providerId,
        cityCode: this.orderInfo.cityCode,
        cityName: this.orderInfo.cityName,
        modelGroupId: this.orderInfo.modelGroupId,
        modelGroupName: this.orderInfo.groupName,
        productType: this.orderInfo.productType,
        productTypeName: this.orderInfo.productTypeName,
        seriesName: "",
        brandShow: 0,
        baseAmount: "",
      };

      this.getProviderFee();
    });
  },
  mounted() {
    uni.$on("cityChoose", this.handleCityChoose);
    uni.$on("modelChoose", this.handleModelChoose);
    uni.$on("seriesChoose", this.handleSeriesChoose);
  },
  unmounted() {
    uni.$off("cityChoose", this.handleCityChoose);
    uni.$off("modelChoose", this.handleModelChoose);
    uni.$off("seriesChoose", this.handleSeriesChoose);
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
  .custom-navbar {
    flex-shrink: 0;
  }
  .content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24rpx;
    .content-card {
      flex-shrink: 0;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 60rpx 0rpx rgba(201, 205, 216, 0.1265);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      padding: 24rpx 32rpx 32rpx;
      .disabled {
        color: #767676ff;
      }
      .brand-wrapper {
        margin-top: 24rpx;
        .brand-trigger {
          width: 168rpx;
          font-size: 24rpx;
          color: #767676;
          height: 40rpx;
          line-height: 40rpx;
          display: flex;
          image {
            width: 40rpx;
            height: 40rpx;
            margin-right: 8rpx;
          }
        }
        .brand-result {
          font-size: 24rpx;
          color: #1a1a1a;
          line-height: 40rpx;
          margin-top: 16rpx;
        }
      }
    }
    .content-fee {
      margin-top: 24rpx;
      padding: 0 32rpx 0 16rpx;
    }
  }
  .bottom-box {
    position: relative;
    width: 100%;
    height: 128rpx;
    flex-shrink: 0;
    padding: 20rpx 24rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0rpx -20rpx 28rpx 0rpx rgba(220, 223, 233, 0.16);
  }
}
</style>
